<template>
  <div class="hide-abbr-table">
    <p
      contenteditable="false"
      v-if="abbrData.length"
      data-type="paragraph"
      :data-id="dataId"
      data-lang="zh"
      :data-block-id="blockId"
    >
      下列缩略语适用于本文件。
    </p>
    <Abbr :blockData="abbrTableData"></Abbr>
  </div>
</template>

<script>
import Abbr from './Abbr.vue'
import { v4 as uuid } from 'uuid'

export default {
  components: { Abbr },
  data() {
    return {
      dataId: uuid(),
      blockId: uuid()
    }
  },
  computed: {
    abbrTableData() {
      return this.$store.state.xmleditor.abbrTableData
    },
    abbrData() {
      return this.abbrTableData?.abbrData || []
    }
  }
}
</script>

<style>
.hide-abbr-table {
  display: none;
}
</style>
